<template>
	<scroll-view
		:upper-threshold="upperNum"
		:lower-threshold="lowerNum"
		:scroll-top="scrollSelfTop||scrollTop"
		:scroll-left="scrollLeft"
		:scroll-into-view="scrollId"
		:scroll-with-animation="true"
		:refresher-threshold="threshold"
		:refresher-background="refresherBg"
		:refresher-enabled="refresherEnable"
		:refresher-triggered="triggered"
		:refresher-default-style="refresherStyle"
		:scroll-y="scrollY"
		:scroll-x="scrollX"
		@refresherrefresh="onRefresher"
		@refresherrestore="onRestore"
		@scrolltolower="toLower"
		:style="{ height: !height ? 'auto' : height + heightType }"
		class="scrollM"
	>
		<view style="width: 100%;" :class="[scrollDirect === 'x' ? 'slotM-row' : '']"><slot></slot></view>
	</scroll-view>
</template>

<script>
/*
 *	upperNum		设置距离顶部多少触发下拉加载
 * 	lowerNum		设置距离底部多少触发上拉加载
 *	scrollTop		设置距离顶部位置(仅在滚动为y时有效)
 * 	scrollLeft		设置距离左侧位置(仅在滚动为x时有效)
 * 	scrollId		设置自动滚动到对应id标签
 *	scrollDirect	列表方向 x横向 y竖向
 *  height			滚动列表高度
 *  heightType		列表高度单位
 *  isUseDebounce	是否启用防抖
 * 	threshold		自定义下拉刷新阈值
 * 	refresherBg		下拉刷新背景颜色
 * 	refresherEnable	是否启用下拉刷新
 *  refresherStyle	下拉刷新样式	black，white，none
 * 	restoreTime		重置状态所需时间
 */
export default {
	props: {
		upperNum: {
			type: Number,
			default: 50
		},
		lowerNum: {
			type: Number,
			default: 50
		},
		scrollTop: {
			type: Number
		},
		scrollLeft: {
			type: Number
		},
		scrollId:{
			type:String
		},
		scrollDirect: {
			type: String,
			default: 'y'
		},
		height: {
			type: Number,
			default: 0
		},
		heightType: {
			type: String,
			default: 'vh'
		},
		isUseDebounce: {
			type: Boolean,
			default: true
		},
		threshold: {
			type: Number,
			default: 45
		},
		refresherBg: {
			type: String,
			default: 'transparent'
		},
		refresherEnable: {
			type: Boolean,
			default: false
		},
		refresherStyle: {
			type: String,
			default: 'black'
		},
		restoreTime: {
			type: Number,
			default: 1000
		}
	},
	data() {
		/*
			* scrollY		垂直滚动
			* scrollX		横向滚动
			* triggered		是否触发下拉刷新
			* _freshing		是否已触发
			* timeout		设置interval的ID
		*/
		return {
			scrollY: true,
			scrollX: false,
			triggered: false,
			_freshing: false,
			timeout: null,
			scrollSelfTop:null
		};
	},
	created() {
		if (this.scrollDirect === 'y') {
			this.scrollY = true;
			this.scrollX = false;
		} else {
			this.scrollY = false;
			this.scrollX = true;
		}
	},
	mounted() {},
	watch:{
		scrollId:{
			handler(val){
				// #ifdef MP-WEIXIN
				const query = uni.createSelectorQuery();
				query.select('#'+val).boundingClientRect(data=>{
					this.scrollSelfTop = data.top
				}).exec()
				// #endif
			}
		}
	},
	methods: {
		onRefresher() {
			if (this._freshing) return;
			this.triggered = true;
			this._freshing = true;
			this.$emit('fresh');
			setTimeout(() => {
				this.triggered = false;
				this._freshing = false;
			}, this.restoreTime);
		},
		onRestore() {
			this.triggered = 'restore';
			this._freshing = false;
		},
		toLower() {
			if (this.isUseDebounce) {
				this.debouceFunction(() => {
					this.$emit('lower');
				});
			} else {
				this.$emit('lower');
			}
		},
		debouceFunction(func, wait = 500, immediate = false) {
			// 清除定时器
			if (this.timeout !== null) clearTimeout(this.timeout);
			// 立即执行，此类情况一般用不到
			if (immediate) {
				var callNow = !this.timeout;
				this.timeout = setTimeout(function() {
					this.timeout = null;
				}, wait);
				if (callNow) typeof func === 'function' && func();
			} else {
				// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
				this.timeout = setTimeout(function() {
					typeof func === 'function' && func();
				}, wait);
			}
		}
	}
};
</script>

<style lang="scss" scoped>

.scrollM {
	width: 100%;
	::-webkit-scrollbar {
		display: none; //设置隐藏
		width: 0 !important; //设置大小
		height: 0 !important; //设置大小
		-webkit-appearance: none;
		background: transparent;
	}
	.slotM-row {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
	}
}
</style>
